<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
    <style>
        h2{
            padding-left: 3%;
        }
        .main{
            width: 60%;
            margin-left: 10%;
        }
        .sendMail-1{
            margin-top: 6px;
        }
    </style>
</head>
<body>

<div class="main">
   <div>
      <h2>操作日志</h2>
      <div>
         用户名: <input type="text" id="username">
         真实姓名: <input type="text" id="uname">
         <button class="btn btn-success" id="seachLog">搜索</button> <br>
         日志种类:
            <input type="radio" name="type" value="" checked="checked">全选
            <input type="radio" name="type" value="正常" >正常
		    <input type="radio" name="type" value="异常">异常<br>
		    
		    <button class="btn btn-danger" id="delete">清理数据</button>
		    
      </div>
      <div>
        <table class="table">
         <tr class="info">
            <th><input type="checkbox" id="checkall"  /></th>
            <th>用户</th>
            <th>异常类型</th>
            <th>时间</th>
            <th>操作</th>
         </tr>
         <tr v-for="log in logList">
            <td><input type="checkbox" id="checkall" name="checkbox" value="{{log.logid}}" /></td>
            <td>{{log.uname}}</td>
            <td>{{log.type}}</td>
            <td>{{log.stime}}</td>
            <td>{{log.operation}}</td>
         </tr>
        </table>
        <div id="layPage"></div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function(){
	   var currentPage = 1;
	   var vue = new Vue({
		   el:".main",
		   data:{logList:""},
		   methods:{
			   getLogList :function(){
				   var _self = this;
				   var userName = $("#username").val();
				   var uname = $("#uname").val();
				   var type=$('input:radio[name="type"]:checked').val();
				   $.ajax({
					   url:'../getLog',
					   type:'post',
					   data:{'currentPage':currentPage,'userName':userName,'uname':uname,'type':type},
					   dataType:'json',
					   success : function(result){
						   console.log(result);
						   _self.logList = result.logList;
						   
						   laypage({
       						cont:$("#layPage"),//分页内容所有显示的容器位置 
       						pages:result.mixNum,//分页显示的总页数
       						curr:currentPage,//当前页
      						 skin:'molv',//皮肤
      						 skip:true,//支持跳页的功能
      						 last:'尾页',
      						 groups:result.limit, 
      						 jump:function(obj,first){//触发分页后的回调
      							 currentPage=obj.curr;
      							 if(!first){//一定要加此判断，否则初始时会无限刷新
      								vue.getLogList();//获取当前页
      							  }
       						 }
       					});
						   
					   }
				   })
			   }
		   }
	   })
	   
	   vue.getLogList();
	   
	   $("#checkall").click(function(){
		   console.log("test");
		   if ($(this).prop("checked") == true) {
  				$("input[name='checkbox']").each(function() {
  					$(this).prop("checked", true);
  				});
  			}
  			else {  
  				$("input[name='checkbox']").each(function() {  
  					$(this).prop("checked", false);  
  				});  
  			}  
	   })
	   
	   $("#delete").click(function(){
        	  var str="";
     		 $("input[name='checkbox']").each(function(){
     			 if($(this).prop("checked")==true){
     				 str +=$(this).val()+",";
     			 }
     		 })
     		  console.log(str);
     		  if(confirm("确认删除")){
     			  $.ajax({
     				  url:'../moveLogs', 
     				  type:'post',
     				  data:{'str':str},
     				  dataType:'json',
     				  success:function(result){
     					  if(result){
     						 alert("删除成功")
    						 currentPage=1;
     						 vue.getLogList();
     					  }else{
     						  alert("失败")
     					  }
     				  }
     			  })
     		  }
          })
          
      $("#seachLog").click(function(){
    	  currentPage=1;
    	  vue.getLogList();
      })	   
   })
</script>
</body>
</html>